<template>
    <div class="tree_box">
        <tree-item :data="departmentData" @changeId="change" @resetName="resetName" @changeIsOpenAndSelect="changeIsOpenAndSelect"></tree-item>
    </div>
</template>

<script>
import treeItem from './tree-item'
export default {
    components: {
        treeItem
    },
    data() {
        return{
            departmentData: [],
            count: 0,
            depId: '',
            topLevelNameArr: [],
            hasFindName: false
        }
    },
    methods: {
        returndepartmentData() {
            this.departmentData.map((item, index) => {
                item.departmentName = this.topLevelNameArr[index]
            })
            return this.departmentData
        },
        searchName(name) {
            this.changeIsOpenAndSelect('search', null , name)
        },
        recursionFn(arr) {
            arr.map((item, index) => {
                 this.count++
                item.isOpen = false
                if (this.count == 1 && index == 0) {
                    item.topLevel = true
                } else {
                    item.topLevel = false
                }
                if (item.userList && item.userList.length !== 0) {
                   item.userList.map((listItem) => {
                       listItem.selected = false
                   }) 
                }
                if (item.children && item.children) {
                    this.recursionFn(item.children)
                }
            })
            return arr
        },
        recursionChangeIsOpenAndSelect(arr, type, id, name, key, departmentId ) {
            top:
            for (let [index, item] of arr.entries()) {
                if (item.departmentId == id) {
                    if (type == "isOpen") {
                         item.isOpen = !item.isOpen
                    }
                 }
                 if (type == "resetSelected") {
                     if (item.userList && item.userList.length !== 0) {
                        item.userList.map((listItem) => {
                            listItem.selected = false
                        })
                    }
                 }
                if (type == "selected") {
                    if (item.userList && item.userList.length !== 0) {
                        item.userList.map((listItem) => {
                            listItem.selected = false
                            if (listItem.id == id && item.departmentId == departmentId) {
                                listItem.selected = true
                                this.changeIsOpenAndSelect('closeOpen', null, listItem.name, index)
                            }
                        })
                    }
                }

                if (type == "search") {
                    if (item.userList && item.userList.length !== 0) {
                        for (const listItem of item.userList) {
                            listItem.selected = false
                            if (listItem.name == name) {
                                this.changeIsOpenAndSelect('resetSelected', null, null, null)
                                listItem.selected = true
                                item.isOpen = true
                                this.change(listItem.id, listItem.name)
                                this.hasFindName = true
                                this.changeIsOpenAndSelect('closeOpen', null, listItem.name, index)
                                break top
                                break
                            } else { // 没有匹配到人
                                if (!this.hasFindName) {
                                    this.hasFindName = false
                                }
                            }
                        }
                        /* item.userList.map((listItem) => {
                            listItem.selected = false
                            if (listItem.name == name) {
                                listItem.selected = true
                                item.isOpen = true
                                this.change(listItem.id, listItem.name)
                                this.hasFindName = true
                            } else { // 没有匹配到人
                                if (!this.hasFindName) {
                                    this.hasFindName = false
                                }
                            }
                        }) */
                    }
                }
                
                if (type == "closeOpen") {
                    item.isOpen = false
                    arr.map((item, index) => {
                        item.departmentName = this.topLevelNameArr[index]
                    })
                    arr[key].departmentName = `${this.topLevelNameArr[key]}（${name}）`
                    // console.log(key)
                }
                if (item.children && item.children.length !== 0) {
                    this.recursionChangeIsOpenAndSelect(item.children, type, id, name, key, departmentId)
                }
            }
            return arr
        },
        change(id, name) {
            this.$emit('changeId', id, name)
        },
        resetName() {
            this.$emit('resetName')
        },
        changeIsOpenAndSelect(type, id, name, key, departmentId) {
            if (type == "search") {
                this.hasFindName = false
            }
            if (type == "selected" || type == "isOpen") {
                this.$emit('resetName')
            }
            this.departmentData = this.recursionChangeIsOpenAndSelect(this.departmentData, type, id, name, key, departmentId)
            if (!this.hasFindName && type == "search") {
                this.$emit('noHasFindName')
            }
            if (this.hasFindName && type == "search") {
                this.$emit('TurnHandler')
            }
        },
        getDepartmentList() {
            this.$http(this.$API.getLoadTransposeUser,{},true, false, true).then((res) => {
                if (res) {
                    this.listArr = res
                    this.departmentData = this.recursionFn(res)
                    res.forEach((item, index) => {
                        this.topLevelNameArr[index] = item.departmentName
                    })
                }
            })
        },
    },
    mounted() {
        this.getDepartmentList()
    },
}
</script>

<style lang="less">
    
</style>